<template>
  <div class="app-container">
    <el-card>
      <div class="dc-chart">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card :body-style="{padding:0}" style="height:287px;background-color:#ffffff;border-radius: 30px;">
              <div class="mb20">
                <div align="center" class="ft20 mt39">总人数</div>
                <div align="center"><span class="col1">{{residentInfo.number}}</span>人</div>
              </div>
              <el-row class="bodt">
                <el-col :span="12" align="center">
                  <div class="ft16">本月新增</div>
                  <div class="mt12"><span class="col2">{{residentInfo.monthNumber}}</span>人</div>
                </el-col>
                <el-col :span="12" align="center">
                  <div class="ft16">停用</div>
                  <div class="mt12"><span class="col3">{{residentInfo.enableNumber}}</span>人</div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card :body-style="{padding:0}" style="height:287px;background-color:#ffffff;border-radius: 30px;">
              <div id="mapchart" style="width:100%;height:246px;"></div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card :body-style="{padding:0}" style="height:287px;background-color:#ffffff;border-radius: 30px;">
              <div id="agechart" style="width:100%;height:246px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <div class="filter-container">
      <el-card shadow="never" :body-style="{ border: 0, padding: '20px 20px 0 20px'}">
        <el-form ref="searchform" :inline="true" :model="searchform" class="demo-form-inline" size="small">

          <el-form-item label="信息查询：">
            <el-input v-model="query.name" clearable placeholder="姓名" size="medium" style="margin-right:20px" />
          </el-form-item>
          <el-form-item label="查询状态：">
            <el-select v-model="query.enable" placeholder="请选择">
              <el-option label="停用" value="2" />
              <el-option label="正常" value="0" />
              <el-option label="死亡" value="1" />
              <el-option label="迁出" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="medium" type="primary" @click="handleSearch()">查询</el-button>
            <el-button size="medium" type="default" @click="handleClean()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ border: 0 }">
      <div class="list-btn-container">

        <el-button type="primary" icon="el-icon-plus" size="small" @click="ShowEditOrViewDialog()"  v-if="user_level == 2 || user_level == 1">新增</el-button>
        <el-button type="primary" icon="el-icon-edit" class="el-button-modify" size="small" @click="importData('edit')"  v-if="user_level == 2 || user_level == 1">
          导入</el-button>

        <el-button type="primary" icon="el-icon-download"  :loading="loadingbut" class="el-button-modify" size="small"
                   @click="exportExcel()">{{loadingbuttext}}</el-button>
        <el-button type="default" icon="el-icon-refresh" size="small" @click="getData()">刷新</el-button>

      </div>
      <el-table ref="gridtable" size="medium" v-loading="tableloading" :data="tableData" border stripe show-header
                highlight-current-row style="width: 100%" :default-sort="{ prop: 'SortCode', order: 'ascending' }"
      >
        <!--        <el-table-column type="selection" width="50" />-->
        <!-- <el-table-column prop="account" label="账号" sortable="custom" width="120" /> -->
        <!--        <el-table-column prop="id" label="ID" />-->
        <el-table-column prop="name" align="center" label="姓名" />
        <el-table-column prop="blockName" align="center" label="所属街道" />
        <el-table-column prop="communityName" align="center" label="所属社区" />

        <el-table-column prop="idCard" align="center" label="身份证">
          <template slot-scope="scope">
            {{scope.row.idCard? scope.row.idCard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2"):""}}
          </template>
        </el-table-column>
        <el-table-column prop="bankNo" align="center" label="银行卡号" />
        <el-table-column prop="census" align="center" label="户籍地" />
        <el-table-column prop="residenceAddr" align="center" label="现居住地" />

        <el-table-column prop="enable" align="center" label="状态">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.enable == 2" type="danger">停用</el-tag>
            <el-tag v-show="scope.row.enable == 0" type="success">正常</el-tag>
            <el-tag v-show="scope.row.enable == 1" type="info">死亡</el-tag>
            <el-tag v-show="scope.row.enable == 3" type="warning">迁出</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" align="center" label="创建时间" />
        <el-table-column prop="remark" align="center" label="备注" />
        <el-table-column align="center" label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="editData(scope)"
            >编辑
            </el-button>
            <el-button
                type="text"
                icon="el-icon-remove"
                style="color: #999999"
                @click="setStatus(scope,'status','1')"
                v-if="scope.row.enable != 3 && (scope.row.enable == 0 ||  scope.row.enable == 2)"
            >死亡
            </el-button>
            <el-button
                type="text"
                icon="el-icon-delete"
                style="color: red"
                @click="setStatus(scope,'status','2')"
                v-if="scope.row.enable != 3 && (scope.row.enable == 0 ||  scope.row.enable == 1)"
            >停用</el-button>
            <el-button
                type="text"
                icon="el-icon-upload"
                @click="setStatus(scope,'status','0')"
                v-if="scope.row.enable != 3 && (scope.row.enable == 1 ||  scope.row.enable == 2)"
            >启用
            </el-button>
            <el-button
                type="text"
                icon="el-icon-sort-down"
                style="color: #999999"
                @click="setStatus(scope,'status','3')"
                v-if="scope.row.enable != 3"
            >迁出
            </el-button>
            <el-button
                type="text"
                icon="el-icon-sort-up"
                @click="setStatus(scope,'status','0')"
                v-if="scope.row.enable == 3"
            >迁入
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background :current-page="pagination.currentPage"
                       :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]" :page-size="query.pagesize"
                       layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <el-dialog title="导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" width="400px"
               :close-on-click-modal="false" class="dialog-import">
      <div :class="{'import-content': importFlag === 1, 'hide-dialog': importFlag !== 1}">
        <el-upload class="upload-demo" :action="importUrl" :name="name" :headers="importHeaders"
                   :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :on-error="uploadFail"
                   :on-success="uploadSuccess" :file-list="fileList" :with-credentials="withCredentials">
          <!-- 是否支持发送cookie信息 -->
          <el-button size="small" type="primary" :disabled="processing">{{uploadTip}}</el-button>
          <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
        </el-upload>
        <div class="download-template">
          <a class="btn-download" @click="downloadTemplate">
            <el-button class="icon-download">下载模板</el-button>

          </a>
        </div>
      </div>
      <div :class="{'import-failure': importFlag === 2, 'hide-dialog': importFlag !== 2}">
        <div class="failure-tips">
          <i class="el-icon-warning" style="margin-top:5px"></i>导入失败</div>
        <div class="failure-reason" style="margin-top:10px">
          <h4>失败原因</h4>
          <ul>
            <el-link type="danger">{{errorResults}}</el-link>
            <!-- <li v-for="(error,index) in errorResults" :key="index">
              第{{error.rowIdx + 1}}行，错误：{{error.column}},{{error.value}},{{error.errorInfo}}</li> -->
          </ul>
        </div>
      </div>
    </el-dialog>
    <el-dialog ref="dialogEditForm" :title="editFormTitle + '新增|编辑'" :visible.sync="editVisible" width="660px"
               append-to-body>
      <el-form ref="editFrom" :model="editFrom" :rules="rules">
        <el-form-item label="所属街道" :label-width="formLabelWidth" prop="blockName">
          <el-input v-model="editFrom.blockName" readonly autocomplete="off" />
        </el-form-item>

        <el-form-item label="所属社区" :label-width="formLabelWidth" prop="communityName">
          <el-select  v-model="sValue" v-if=" user_level == 1"
                      placeholder="请选择社区">
            <el-option v-for="item in sOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-input v-model="editFrom.communityName" readonly autocomplete="off" v-if=" user_level == 2" />
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth" prop="RealName">
          <el-input v-model="editFrom.idCard" placeholder="请输入身份证号码" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="姓 名" :label-width="formLabelWidth" prop="RealName">
          <el-input v-model="editFrom.name" placeholder="请输入姓名" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="NickName">
          <el-input v-model="editFrom.phone" placeholder="请输入手机号" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="银行卡号" :label-width="formLabelWidth" prop="bankNo">
          <el-input v-model="editFrom.bankNo" placeholder="请输入银行卡号" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="户籍地" :label-width="formLabelWidth" prop="census">
          <el-input v-model="editFrom.census" placeholder="请输入户籍地" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="现居住地" :label-width="formLabelWidth" prop="residenceAddr">
          <el-input v-model="editFrom.residenceAddr" placeholder="请输入现居住地" autocomplete="off" clearable />
        </el-form-item>

        <el-form-item label="备 注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="editFrom.remark"  placeholder="" autocomplete="off" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStreet,
  fetchDataPost,
  certificationPost,
  getResidentCount,
  getCommunity,
  addResident,
  editResident,
  getUserDetail,
  exportExc,
  download
} from '../../../api/resident';
import {getAllShequ, getAllStreet} from "@/api/user";

var queryTabs2Request = {
  url: "/usercenter/community/community/"
};
var queryTabsRequest = {
  url: "/usercenter/community/street/1"
};
var queryRequest = {
  url: "/residentcenter/resident/page-list"
};
var addRequest = {
  url: "/residentcenter/resident/create/resident"
};
var updateRequest = {
  url: "/residentcenter/resident/update/resident"
};
export default {
  name: 'resident', // 需与菜单的功能编码一致
  //   directives: { elDragDialog },
  data() {
    return {
      loadingbuttext:'下载居民数据',
      loadingbut:false,
      searchform: {
        keywords: '',
        realname: '',
        nickname: '',
        mobilephone: '',
        email: '',
        wechat: '',
        deptIds: ''
      },
      sOptions: {},
      sValue: '',
      tableData: [],
      tableloading: true,
      pagination: {
        currentPage: 1,
        pagesize: 20,
        pageTotal: 0
      },
      sortableData: {
        order: 'desc',
        sort: 'CreatorTime'
      },
      dialogEditFormVisible: false,
      editFormTitle: '',
      editFrom: {
        idCard: '',
        name: '',
        remark: '',
        phone: '',
        bankNo:'',
        census: '',
        residenceAddr: '',
        blockName:'',
        communityName:'',
      },
      rules: {},
      formLabelWidth: '130px',
      currentId: '', // 当前操作对象的ID值，主要用于修改
      currentSelected: [],
      depData: [],
      colOptions: this.getColOptions(),
      colOptions2: this.getColOptions(),
      // colOptions2:this.getProv(),
      query: {
        phone: '',
        name: '',
        username: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      residentInfo: {
        number: 0,
        monthNumber: 0,
        enableNumber: 0,
        deathNumber: 0,
        number90: 0,
        number8090: 0,
        numberOtherAge: 0,
        otherPer: 0,
      },
      isCurEdit: false,
      editVisible: false,
      multipleSelection: [],
      importUrl: 'https://api.tfsmy.nanqiao.openviewtech.com/residentcenter/resident/uploadExcel', //后台接口config.admin_url+'rest/schedule/import/'
      importHeaders: {
        enctype: 'multipart/form-data',
        'auth-token': localStorage.getItem('token')
      },
      name: 'file',
      fileList: [],
      withCredentials: true,
      processing: false,
      uploadTip: '点击上传',
      importFlag: 1,
      dialogImportVisible: false,
      errorResults: '',
      user_level:0
    }
  },
  mounted() {
    this.user_level = localStorage.getItem('level')
    // this.initCharts();
    // this.initAgeCharts();
    getUserDetail({
      id: localStorage.getItem('userid')
    }).then(res => {
      this.editFrom.blockName = res.data.blockName
      this.editFrom.communityName = res.data.communityName
      console.log(this.editFrom);
    });
  },
  created() {
    queryRequest.data = this.query;
    this.getData()
    this.InitDictItem()
  },
  methods: {
    importData() {
      this.importFlag = 1
      this.fileList = []
      this.uploadTip = '点击上传'
      this.processing = false
      this.dialogImportVisible = true
    },
    exportExcel() {
      this.loadingbut = true;
      this.loadingbuttext = '下载中';
      let param = this.query

      exportExc(param).then(res => {
        let data = res
        if (!data) {
          this.loadingbut = false;
          this.loadingbuttext = '下载居民数据';
          return
        }

        let url = window.URL.createObjectURL(new Blob([data]))
        let a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.setAttribute('download', 'excel.xls')
        document.body.appendChild(a)
        a.click() //执行下载
        window.URL.revokeObjectURL(a.href)
        document.body.removeChild(a)
        this.loadingbut = false;
        this.loadingbuttext = '下载居民数据';
        this.$message.success('导出成功!')
      });

    },
    outportData() {
      scheduleApi.downloadTemplate()
    },
    handlePreview(file) {
      //可以通过 file.response 拿到服务端返回数据
    },
    handleRemove(file, fileList) {
      //文件移除
    },
    beforeUpload(file) {
      //上传前配置
      let excelfileExtend = ".xls,.xlsx" //设置文件格式
      let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
      if (excelfileExtend.indexOf(fileExtend) <= -1) {
        this.$message.error('文件格式错误')
        return false
      }
      this.uploadTip = '正在处理中...'
      this.processing = true
    },
    //上传错误
    uploadFail(err, file, fileList) {
      this.uploadTip = '点击上传'
      this.processing = false
      this.$message.error(err)
    },
    //上传成功
    uploadSuccess(response, file, fileList) {
      this.uploadTip = '点击上传'
      this.processing = false
      if (response.code === -1) {
        this.errorResults = response.message
        if (this.errorResults) {
          this.importFlag = 2
        } else {
          // this.dialogImportVisible = false
          this.$message.error(response.message)
        }
      } else {
        this.importFlag = 3
        this.dialogImportVisible = false
        this.$message.info('导入成功')
        this.getData()
      }
    },
    downloadTemplate() {
      download().then(res => {
        let data = res
        if (!data) {
          return
        }
        console.log(data)
        let url = window.URL.createObjectURL(new Blob([data]))
        let a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.setAttribute('download', 'excel.xls')
        document.body.appendChild(a)
        a.click() //执行下载
        window.URL.revokeObjectURL(a.href)
        document.body.removeChild(a)
      });
    },
    openEdit(row) {
      getUserDetail({
        id: localStorage.getItem('userid')
      }).then(res => {
        this.editFrom.blockName = res.data.blockName
        this.editFrom.communityName = res.data.communityName
        this.id = row.id;
        this.editFrom.phone = parseInt(row.phone);
        this.editFrom.remark = row.remark;
        this.editFrom.idCard = row.idCard;
        this.editFrom.bankNo = row.bankNo;
        this.editFrom.census = row.census;
        this.editFrom.residenceAddr = row.residenceAddr;
        this.editFrom.name = row.name;
        this.editFrom.id = this.id;
        this.editVisible = true;
        this.isCurEdit = true;
        var blockId = res.data.blockId;
        getAllShequ({
          id: blockId
        }).then(res => {

          this.sOptions = res.data
          this.sValue = row.communityId;
        });
      });


    },
    //编辑
    editData(scope){
      this.openEdit(scope.row)
    },
    setStatus(scope,type,command) {
      const that = this
      let title = ''
      if (command == 0) {
        title = '启用'
      } else if (command == 1) {
        title = '死亡'
      } else if (command == 2) {
        title = '停用'
      } else {
        title = '编辑'
      }
      this.$confirm(`是否${title}所选的数据项?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(function () {

            let param = []
            param.data = {
              id: scope.row.id,
              enable: command
            }
            certificationPost(param).then(res => {
              if(res.code!=0){
                that.$message.error(res.message);
              }else{

                that.InitDictItem();
                that.getData();
                that.initCharts();
                that.initAgeCharts();
              }

            });

          })
    },
    // 获取数据
    getData() {
      //获取居民列表
      fetchDataPost(queryRequest).then(res => {
        this.tableloading = false
        this.tableData = res.data.list;
        this.pagination.pageTotal = res.data.total;
      });
    },
    getColOptions() {
      const data = [];
      queryTabsRequest.id = 1;
      getStreet(queryTabsRequest).then(res => {
        res.data.forEach(function (tabs) {
          data.push({
            label: tabs.name,
            key: tabs.id
          });
        });
      });
      return data;
    },
    getColOptions2() {
      // const data = [];
      // queryTabs2Request.id =this.editFrom.communityId;
      // getCommunity(queryTabs2Request).then(res =>{
      //   res.data.forEach(function (tabs) {
      //     data.push({
      //       label: tabs.name,
      //       key: tabs.id
      //     });
      //   });
      // });
      // return data;
      const data = [];
      queryTabsRequest.id = 2;
      getStreet(queryTabsRequest).then(res => {
        res.data.forEach(function (tabs) {
          data.push({
            label: tabs.name,
            key: tabs.id
          });
        });
      });
      return data;
    },
    initCharts() {
      let myChart = this.$echarts.init(document.getElementById('mapchart'))
      let that = this
      getResidentCount(queryRequest).then(res => {


        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 40,
            top: 92,
            bottom: 40,
            textStyle: {
              fontSize: 16
            }
          },
          color: ['#09B76E', '#f56c6c', '#EEEEEE', '#FEBF5E'],
          series: [{
            name: '居民所在地分布',
            type: 'pie',
            radius: ['70%', '50%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [{
              value: res.data.number - res.data.enableNumber - res.data.deathNumber - res.data.removeNumber,
              name: '正常人数'
            },{
              value: res.data.enableNumber,
              name: '停用人数'
            },
              {
                value: res.data.deathNumber,
                name: '死亡人数'
              },{
                value: res.data.removeNumber,
                name: '迁出人数'
              },
            ]
          }]
        })
      });
    },
    initAgeCharts() {
      let that = this
      getResidentCount(queryRequest).then(res => {

        let myChart = this.$echarts.init(document.getElementById('agechart'))
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 40,
            top: 92,
            bottom: 20,
            textStyle: {
              fontSize: 16
            }
          },
          color: ['#F66A55', '#FEBF5E', '#09B76E', 'blue'],
          series: [{
            name: '居民年龄分布',
            type: 'pie',
            radius: ['70%', '50%'],
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [{
              value: res.data.number80,
              name: '80岁以下'
            },{
              value: res.data.number8089,
              name: '80-89岁'
            },{
              value: res.data.number9099,
              name: '90-99岁'
            },{
              value: res.data.number100,
              name: '100岁+'
            },
            ]
          }]
        })
      });
    },
    setSystemAdmin(rowData) {
      console.log(rowData)
      const postData = {
        account: rowData.username,
        creatoruserid: this.$store.state.user.userid,
        deletemark: false,
        enabledmark: true,
        id: 0,
        isadministrator: true,
        ismember: true,
        membergradeid: this.searchform.deptIds[this.searchform.deptIds.length - 1],
        mobilephone: rowData.username,
        nickname: rowData.username,
        organizeid: this.searchform.deptIds[this.searchform.deptIds.length - 1],
        realname: rowData.realname,
        referraluserid: rowData.id,
        securitylevel: 0,
        roleid: '5'
      }
      modifySystemAdmin(postData).then((res) => {
        console.log(res.data)
        if (res.data) {
          this.$message.success('设置成功!')
          this.loadTableData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
     * 初始化数据
     */
    InitDictItem() {
      getResidentCount(queryRequest).then(res => {
        this.residentInfo = res.data
        this.initCharts();
        this.initAgeCharts();
      });
    },

    // 取消按钮
    cancel() {
      this.dialogEditFormVisible = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.editFrom = {


        // 需个性化处理内容
      }
      this.resetForm('editFrom')
    },

    handleClean: function () {
      this.query = {
        phone: '',
        name: '',
        username: '',
        enable: '',
        pageNum: 1,
        pageSize: 10,
      }
      queryRequest.data = this.query
      this.getData()
    },

    /**
     * 点击查询
     */
    handleSearch: function () {

      queryRequest.data.pageNum = 1

      this.getData()
    },

    /**
     * 新增、修改或查看明细信息（绑定显示数据）     *
     */
    ShowEditOrViewDialog: function (view) {

      getUserDetail({
        id: localStorage.getItem('userid')
      }).then(res => {

        this.editFrom = {};
        this.editVisible = true;
        this.isCurEdit = false;
        this.editFrom.blockName = res.data.blockName

        this.editFrom.communityName = res.data.communityName
        var blockId = res.data.blockId;
        getAllShequ({
          id: blockId
        }).then(res => {
          this.sOptions = res.data
        });

      });

    },
    bindEditInfo: function () {
      getSys_userDetail(this.currentId).then((res) => {
        this.editFrom = res.data
        // 需个性化处理内容
      })
    },
    /**
     * 新增/修改保存
     */
    saveEditForm() {
      let that = this
      this.$refs['editFrom'].validate((valid) => {
        if (valid) {
          if (that.isCurEdit) {
            if(!that.sValue && that.user_level==1){
              this.$message.error(`请选择所属社区`);
              return false;
            }
            if(that.user_level==1){
              that.editFrom.communityId = that.sValue;
            }

            updateRequest.data = that.editFrom;
            editResident(updateRequest).then(res => {
              console.log(res);
              if (res.code == 0) {
                this.$message.success(`修改成功`);
                this.editVisible = false;
                this.handleSearch()
                this.InitDictItem()
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            if(!that.sValue && that.user_level==1){
              this.$message.error(`请选择所属社区`);
              return false;
            }
            if(that.user_level==1){
              that.editFrom.communityId = that.sValue;
            }
            addRequest.data = that.editFrom;
            addResident(addRequest).then(res => {

              if (res.code == 0) {
                this.$message.success(`新增成功`);
                this.editVisible = false;
                this.handleSearch()
                this.InitDictItem()
              } else {
                this.$message.error(res.message);
              }
            });
          }

        } else {
          return false
        }
      })
    },

    /**
     * 选择每页显示数量
     */
    handleSizeChange(val) {
      this.query.pageSize = val
      this.query.currentPage = 1
      this.getData()
    },
    /**
     * 选择当页面
     */
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fcf9fc;
}

.el-card {
  border: 0;
  background-color: #fcf9fc;
  box-shadow: 0 !important;
}

.el-table {
  border-radius: 10px;
}

.ft20 {
  font-size: 20px;
  color: #333333;
}

.mt39 {
  margin-top: 39px;
}

.col1 {
  color: #4940FD;
  font-size: 28px;
}

.col2 {
  color: #FEBF5E;
  font-size: 20px;
}

.col3 {
  color: #F66A55;
  font-size: 20px;
}

.mt12 {
  margin-top: 12px;
}

.bodt {
  margin: 30px 0 0 0;
  border-top: 1px dotted #CCCCCC;

  .el-col .ft16 {
    font-size: 16px;
    color: #333333;
    text-align: center;
    margin-top: 36px;
  }
}
</style>